import { WeaInputSearch,WeaLocaleProvider } from 'ecCom';
import { Menu } from 'antd';
import { observer } from 'mobx-react';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TemplateGroupList extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div className="edc-excel-template-left">
                <div className="search-wrapper">
                    <span onClick={this.clickAll} className="search-all" title={getLabel(21979,'全部类型')}>{getLabel(21979,'全部类型')}</span>
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@zgo2rk`} onSearch={this.onSearch} onChange={this.onSearch} />
                </div>
                <div className="list-wrapper">
                    <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@swo8en`}
                        onClick={this.onClick}
                        selectedKeys={store.selectedGroup ? [store.selectedGroup] : []}
                    >
                        {store.groups.map(menu => (
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@2fg19s@${menu.id}`} key={menu.id}>
                                {menu.showname}
                            </Menu.Item>
                        ))}
                    </Menu>
                </div>
            </div>
        )
    }
    onSearch = (searchValue) => {
        const { store } = this.props;
        store.setLeftSearchValue(searchValue);
    }
    onClick = (menu) => {
        const { store } = this.props;
        store.changeSelectedGroup(menu.key);
    }
    clickAll = () => {
        this.onClick({ key: '' });
    }
}